
<template>
  <!-- <div>
    <div>
      <div id="photoWall">
        <div>
          <img v-for="(image, index) in uploadedImages.filter((item) => item !== '' && item !== null && item !== undefined && item !== 0)" :key="index+1" :src="image" @click="showLargeImage(image)" class="uploaded-image">
        </div>
        <div class="modal" v-if="showLargeImageModal">
          <div class="modal-content">
            <span class="close" @click="closeLargeImage">&times;</span>
            <img :src="largeImageUrl" class="large-image">
          </div>
        </div>
      </div>
    </div>
  </div> -->

  <div>
    <div>
      <div id="photoWall">
        <div>
          <img v-for="(image, index) in uploadedImages.filter((item) => item !== '' && item !== null && item !== undefined && item !== 0)" :key="index+1" :src="image" class="uploaded-image" @click="showLargeImage(image)">
        </div>
        <div v-if="showLargeImageModal" class="modal">
          <div class="modal-content">
            <span class="close" @click="closeLargeImage">&times;</span>
            <div class="image-container">
              <img :src="largeImageUrl" class="large-image">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  props: {
    uploadedImages: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      showLargeImageModal: false,
      largeImageUrl: '',
      largeImageName: ''
    }
  },
  created() {
    // console.log(this.uploadedImages, 'uploadedImages')
  },
  methods: {
    showLargeImage(url) {
      console.log('url', url)
      this.largeImageUrl = url
      console.log('放大')
      this.showLargeImageModal = true
    },
    closeLargeImage() {
      console.log('关闭')
      this.showLargeImageModal = false
    },
    previewImages(event) {
      var input = event.target
      if (input.files && input.files.length > 0) {
        for (var i = 0; i < input.files.length; i++) {
          var reader = new FileReader()
          reader.onload = ((image) => {
            return (e) => {
              console.log(e.target.result, 'e.target.result')
              console.log(e.target.result.length, 'e.target.result')
              this.uploadedImages.push(e.target.result)
              console.log(this.uploadedImages, 'this.uploadedImages')
            }
          })(input.files[i])
          reader.readAsDataURL(input.files[i])
        }
        this.uploadPhotos()
      }
    },
    uploadPhotos() {
      var formData = new FormData()
      var imageInput = document.getElementById('imageInput')
      for (var i = 0; i < imageInput.files.length; i++) {
        formData.append('upload_file', imageInput.files[i])
        console.log(imageInput.files[i], 'imageInput.files[i]')
      }
      axios
        .post('https://mainssl.geekpark.net/api/v1/admin/images', formData)
        .then(response => {
          if (response.status === 200) {
            var newImages = Array.from(imageInput.files).map(file => URL.createObjectURL(file))
            console.log(this.uploadedImages, 'this.uploadedImages')
            console.log(this, 'this.uploadedImages')
            console.log(newImages, 'newImages')
            console.log(response.data.image.url, 'response')
            this.uploadedImages = this.uploadedImages.concat(response.data.image.url)
            this.$emit('photo-uploaded', this.uploadedImages)
          } else {
            alert('照片上传失败！')
          }
        })
        .catch(error => {
          console.log(error)
          alert('照片上传失败！')
        })
    },
    openPreview(image) {
      var previewWindow = window.open('', '_blank')
      previewWindow.document.write('<img src="' + image + '">')
    }
  }
}
</script>

<style scoped lang="scss">
.ipfile {
  // background: red;
}

#photoWall {
  display: flex;
  flex-direction: column;
  img {
    margin-top: 20px;
  }
}

.uploaded-image {
  width: 100%;
  height: 300px;
}

.modal {
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.8);
}

.modal-content {
  margin: 15% auto;
  padding: 20px;
  width: 80%;
  max-width: 80%;
  background-color: #fefefe;
  border-radius: 5px;
}

.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

.large-image {
  width: 100%;
  height: auto;
}

.ipfile {
  // background: red;
}





#photoWall {
  margin-left: 100px;
  display: flex;
  flex-direction: column;
  img {
    margin-top: 20px;
    max-width: 40%;
    height: auto;
  }
}
.uploaded-image {
  width: 100%;
  height: auto;
  cursor: pointer;
}

.modal {
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.8);
}

.modal-content {
  margin: 15% auto;
  padding: 20px;
  width: 80%;
  max-width: 80%;
  background-color: #fefefe;
  border-radius: 5px;
}

.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

.image-container {
  text-align: center;
}

.large-image {
  max-width: 100%;
  height: auto;
  margin-top: 20px;
}



/* 应用于屏幕宽度小于等于 600 像素的设备 */
@media (max-width: 600px) {
  /* 在这里定义样式规则 */
  #photoWall {

  display: flex;
  flex-direction: column;
  img {
    margin-top: 20px;
    max-width: 100%;
    height: auto;
  }
}
}
</style>
